<template>
  <div>
    <!-- <el-header class="el-header1" height="5px"> </el-header> -->
    <el-header class="el-header2" height="35px">
      <el-breadcrumb
        style="margin-left: 10px"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <!-- <el-divider></el-divider> -->

    <el-card>
      <el-button
        type="primary"
        class="button1"
        size="big"
        @click="dialog = !dialog"
        v-if="$store.getters.getUserInfoRoleid == '1'"
        >添加用户</el-button
      >
      <div class="tableContainer">
        <el-table :data="userList" border style="width: 100%">
          <el-table-column
            align="center"
            prop="name"
            label="User Name"
            width="220"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="role"
            label="Role Name"
            width="220"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="description"
            label="Description"
            width="520"
          >
          </el-table-column>
          <el-table-column align="center" prop="" label="操作列表" width="335">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="showDetail(scope.row)"
              >
                详细信息
              </el-button>
              <el-button
                v-if="$store.getters.getUserInfoRoleid == '1'"
                type="primary"
                size="small"
                @click="changeInfo(scope.row)"
              >
                修改信息
              </el-button>
              <el-button
                v-if="$store.getters.getUserInfoRoleid == '1'"
                type="danger"
                size="small"
                @click="deleteUser(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 用户详细信息抽屉 -->
      <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
        <!-- <span>{{ this.info }}</span> -->
        <div style="margin-top: 50px"></div>
        <el-form
          class="elform"
          :model="info"
          :rules="infoRule"
          ref="editFormFormRef"
          label-width="70px"
          width="100px"
        >
          <el-form-item label="用户名" prop="name">
            <el-input v-model="info.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="创建时间" prop="createAt">
            <el-input v-model="info.createAt" disabled></el-input>
          </el-form-item>
          <el-form-item label="更新时间" prop="updateAt">
            <el-input v-model="info.updateAt" disabled></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-input v-model="info.role" disabled></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input v-model="info.description" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="info.email" disabled></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="description">
            <el-input v-model="info.tel" disabled></el-input>
          </el-form-item>
        </el-form>
      </el-drawer>

      <!-- 添加用户抽屉 -->
      <el-drawer
        title="我嵌套了 Form !"
        :visible.sync="dialog"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer"
        size="40%"
      >
        <el-form
          class="elform"
          :model="addForm"
          :rules="addFormRules"
          ref="addFormRef"
          label-width="70px"
          width="100px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="addForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="addForm.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="addForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="addForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-select v-model="addForm.role" placeholder="角色">
              <el-option
                v-for="item in rolelist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-row type="flex" gutter="10" style="margin-top: '10px'">
          <el-col span="12" offset="5"
            ><el-button @click="cancelRegister">取 消</el-button></el-col
          >
          <el-col span="12">
            <el-button type="primary" @click="sendRegister"
              >确定</el-button
            ></el-col
          >
        </el-row>
      </el-drawer>

      <!-- 修改用户抽屉 -->
      <el-drawer
        title="我嵌套了 Form !"
        :visible.sync="dialog2"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer"
        size="40%"
      >
        <el-form
          class="elform"
          :model="editForm"
          :rules="editFormRules"
          ref="editFormFormRef"
          label-width="70px"
          width="100px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="editForm.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="editForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="editForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-select v-model="editForm.role" placeholder="角色">
              <el-option
                v-for="item in rolelist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-row type="flex" gutter="10" style="margin-top: '10px'">
          <el-col span="12" offset="5"
            ><el-button @click="dialog2 = !dialog2">取 消</el-button></el-col
          >
          <el-col span="12">
            <el-button type="primary" @click="sendChangeInfo()"
              >确定</el-button
            ></el-col
          >
        </el-row>
      </el-drawer>

      <!-- 分页 -->
      <el-pagination
        style="margin-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        current-page.sync="1"
        :page-size="2"
        layout="total, prev, pager, next"
        :total="3"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    //验证邮箱的校验规则 正则
    var checkEmail = (rule, value, callback) => {
      //验证邮箱的正则
      const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (regEmail.test(value)) {
        return callback();
      }
      callback("请输入合法的邮箱啊");
    };
    //验证手机号的校验规则 正则
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^1(3|4|5|7|8)\d{9}$/;
      // console.log(value);

      if (regMobile.test(value)) {
        return callback();
      }
      callback("请你好好打手机号啊，！我写代码很辛苦的啊");
    };

    return {
      info: {}, //detail
      drawer: false,

      dialog: false,
      dialog2: false,
      loading: false,

      total: 0,
      userList: [],

      // 角色列表
      rolelist: [],
      // 添加用户信息
      addForm: {
        username: "",
        password: "",
        email: "",
        mobile: "",
        role: "",
      },
      // 修改用户信息
      editForm: {
        id: -1,
        username: "",
        password: "",
        email: "",
        mobile: "",
        role: "",
      },

      // 验证规则
      addFormRules: {
        username: [
          { required: true, message: "请输入您老的名字", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入您老的密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
        email: [{ required: true }, { validator: checkEmail, trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入您老的手机", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
      },
      editFormRules: {
        email: [
          { required: true, message: "请输入用户邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入用户手机", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
      },
    };
  },

  created() {
    this.getUserList();
    this.getRoleList();
  },
  methods: {
    async getRoleList() {
      const { data } = await this.axios({
        method: "get",
        url: "/role/getroles",
      });

      // JSON.parse(data);
      console.log(data);
      // this.userList = data.data.res;
      this.rolelist = data;
      console.log(this.rolelist);
    },
    async getUserList() {
      const { data } = await this.axios({
        method: "get",
        url: "/users",
      });

      // JSON.parse(data);
      console.log(data.data.res);
      this.userList = data.data.res;
    },

    async Register() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请输入正确的信息！生气");
        const { data } = await this.axios({
          method: "post",
          url: "/register",
          data: {
            name: this.addForm.username,
            password: this.addForm.password,
            email: this.addForm.email,
            tel: this.addForm.mobile,
            role: this.addForm.role,
          },
        });
        if (data.meta.status === 200) return this.$message.success("注册成功");
        else return this.$message.error("注册失败");
      });
    },

    showDetail(info) {
      this.info = info;
      this.drawer = !this.drawer;
      console.log(this.info);
    },
    cancelRegister() {
      this.dialog = !this.dialog;
    },
    // 注册
    async sendRegister() {
      this.$refs.drawer.closeDrawer();
      this.Register();
      // JSON.parse(data);
      this.getUserList();
      // console.log(this.addForm);
    },
    // 更新数据
    changeInfo(oldInfo) {
      // console.log(oldInfo)
      this.editForm.username = oldInfo.name;
      this.editForm.email = oldInfo.email;
      this.editForm.mobile = oldInfo.tel;
      this.editForm.id = oldInfo.id;
      this.dialog2 = !this.dialog2;
    },
    async sendChangeInfo() {
      // console.log(id);
      this.$refs.drawer.closeDrawer();
      // this.$refs.editFormRef.validate(async (valid) => {
      // if (!valid) return this.$message.error("请输入正确的信息！生气");
      const { data } = await this.axios({
        method: "post",
        url: `/users/${this.editForm.id}`,
        data: {
          name: this.editForm.username,
          // password: this.editForm.username,
          email: this.editForm.email,
          tel: this.editForm.mobile,
          role: +this.editForm.role,
        },
      });
      // this.$ref.drawer.resetField();
      this.$refs.drawer.closeDrawer();
      this.getUserList();
      if (data.status === 200) return this.$message.success("修改成功");
      else return this.$message.error("注册失败");

      // });
    },

    // 删除用户
    async deleteUser(id) {
      const { data } = await this.axios({
        method: "get",
        url: `/users/delete/${id}`,
      });
      this.getUserList();
      if (data.status === 200) return this.$message.success("删除成功");
      else return this.$message.error("删除失败");
    },
  },
};
</script>

<style lang="scss" scoped>
.button1 {
  margin-bottom: 25px !important;
}
.elform {
  margin-right: 50px;
}
</style>
